<template>
	<view class="container">
		<top-navbar title="门店商品"></top-navbar>
		<view class="stroe_name">
			<text class='iconfont icon-dizhi'></text>
			<text>{{ storeName }}(弗洛花园鲜花)</text>
		</view>
		<view class="tab_content">
			<view class="tabs" :style="{ top: sysHeight + top  + 'px' }">
				<text 
					v-for="(item,index) in tabList" 
					:key="index" 
					@click="tabClick(index)"
					:class="curTab == index ? 'active' : ''"
				>{{ item.name }}</text>
			</view>
			<view class="tab" v-if="curTab == 0">
				<view class="search_box">
					<input type="text" @input="searchStore" v-model="searchVal" placeholder="搜索商品" />
					<text class="iconfont icon-sousuo"></text>
					<image src="/static/images/saoyisao.png" mode="widthFix" @click="scanCode"></image>
				</view>
				<view class="tables">
					<view class="row sticky" :style="{ top: sysHeight + top + 35 + 'px' }">
						<view class="row_td">商品信息</view>
						<view class="row_td">售价</view>
						<view class="row_td">库存</view>
						<view class="row_td">打签</view>
					</view>
					<view class="row" v-for="(item, index) in storeList" :key="index">
						<view class="row_td">{{ item.store_name }}</view>
						<view class="row_td">{{ item.shop_price }}</view>
						<view class="row_td">
							<input 
								type="text" 
								v-model="item.shop_stock" 
								@focus="stockFocus" 
								@blur="editStock(item.shop_stock, index, item)" 
							/>
						</view>
						<view class="row_td"><text class="btn" @click="showPop(item)">打印</text></view>
					</view>
				</view>
				<view class="loadmore">
					<view class="loading" v-if="!isScan">
						<text class="iconfont icon-jiazai" v-if="loadStatus"></text>
						<text>{{ loadTitle }}</text>
					</view>
					<view class="back_all" @click="lookAll" v-else>返回全部 >></view>
				</view>
			</view>
			<view class="tab" v-if="curTab == 1">
				<view class="search_box">
					<input type="text" @input="searchStore1" v-model="searchVal1" placeholder="订单编号/下单人手机号" />
					<text class="iconfont icon-sousuo"></text>
				</view>
				<view class="store_order_list">
					<view class="item" v-for="(item, index) in orderList" :key="index">
						<view class="order_num">订单编号: {{ item.order_id }}</view>
						<view class="order_user">
							<text>下单人: {{ item.nickname || '付款码订单' }}</text>
							<text>{{ item._add_time }}</text>
						</view>
						<view class="order_info">
							<view class="row" v-for="(v, k) in item.cartInfo" :key="k">
								<text class="title">{{ v.productInfo.store_name }}</text>
								<view class="numberbox" v-if="isEdit">
									<text class="reduce iconfont icon-shangpinshuliang-jian" @click="reduce"></text>
									<input type="number" v-model="v.cart_num" />
									<text class="plus iconfont icon-shangpinshuliang-jia" @click="plus"></text>
								</view>
								<text v-if="!isEdit">X{{ v.cart_num }}</text>
							</view>
							<!-- <view class="row">
								<text class="title">多彩塑料花瓶 网红款(赠品)</text>
								<text>X1</text>
							</view>
							<view class="row">
								<text class="title">祝福卡</text>
								<text>X1</text>
							</view> -->
							<view class="rows">
								<text>优惠券</text>
								<text style="color: #D9001B;" v-if="item.cartInfo.length > 0 && item.cartInfo[0].coupon_price > 0">
									-{{ item.cartInfo[0].coupon_price }}
								</text>
								<text style="color: #999; font-size: 24rpx;" v-else>暂无可用优惠券</text>
							</view>
							<view class="total">小计: ￥{{ item.pay_price }}</view>
							<view class="btn_group" v-if="!isEdit">
								<text @click="goOrderDetails(item.order_id)">查看详情</text>
								<text v-if="item.paid == 1">打印小票</text>
								<block v-if="item.order_type != 2 && item.paid == 1">
									<text v-if="item.refund_status == 0" @click="showPop1(item)">退款</text>
									<text v-else-if="item.refund_status == 1" @click="showPop2">退款中</text>
									<text v-else-if="item.refund_status == 2" @click="goOrderDetails(item.order_id)">已退款</text>
									<text v-else-if="item.refund_status == 88" @click="goOrderDetails(item.order_id)">编辑中</text>
									<text @click="editOrder(item.order_id, item.refund_status)">修改订单</text>
								</block>
								<block v-if="item.paid == 0">
									<text style="background-color: #fa5107; border-color: #fa5107;">未付款</text>
								</block>
							</view>
							<view class="btn_group" v-else>
								<text class="btn" @click="edit">确定修改</text>
							</view>
						</view>
					</view>
				</view>
				<view class="loadmore">
					<view class="loading">
						<text class="iconfont icon-jiazai" v-if="loadStatus"></text>
						<text>{{ loadTitle }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 标签打印 -->
		<wyb-popup ref="popup" type="center" height="380" width="500" radius="6" :showCloseIcon="true">
		    <view class="popup-content">
		        <view class="popup_title">设置标签打印数量</view>
				<view class="numberbox">
					<text class="reduce iconfont icon-shangpinshuliang-jian" @click="reduce"></text>
					<input type="number" v-model="printNum" />
					<text class="plus iconfont icon-shangpinshuliang-jia" @click="plus"></text>
				</view>
				<view class="pop_btn" @click="goPrint">确定</view>
		    </view>
		</wyb-popup>
		<!-- 退款 -->
		<wyb-popup ref="popup1" type="center" @hide="popupHide" height="420" width="500" radius="6" :showCloseIcon="true">
		    <view class="popup-content">
		        <view class="title" v-if="!isSure">确定退款吗</view>
		        <view class="title" v-else>输入退款金额</view>
				<view class="desc" v-if="!isSure">
					请仔细核对订单信息
				</view>
				<view class="money" v-else>
					<input type="text" v-model="refundPrice" />
				</view>
				<view class="pop_btn_group" v-if="!isSure">
					<text @click="closePop">不了</text>
					<text @click="refund">确定退款</text>
				</view>
				<view class="pop_btn" @click="refundSure" v-else>确定</view>
		    </view>
		</wyb-popup>
		<!-- 订单修改 -->
		<wyb-popup ref="popup2" type="center"  width="500" radius="6" :showCloseIcon="true">
		    <view class="popup-content">
		        <view class="title" style="margin-top: -20rpx;">订单修改完成</view>
				<view class="desc" style="color: #D9001B; font-size: 32rpx;">{{ tips }}</view>
				<view class="tips">平台承诺退款将在72小时内处理，请留意退款进度</view>
				<view class="pop_btn" @click="closePop2">确定</view>
		    </view>
		</wyb-popup>
	</view>
</template>

<script>
	// #ifdef APP-PLUS || MP
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	// #endif
	// #ifndef APP-PLUS || MP
	let sysHeight = 0;
	// #endif
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import { 
		storeGoods, 
		storeOrders,
		editStock,
		goodsInfoByCode
	} from '@/api/store.js'
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import { shopOrderRefund } from '@/api/order.js'
	export default {
		components: {
		    wybPopup
		},
		data() {
			return {
				tabList: [
					{name: '门店商品'},
					{name: '门店订单'}
				],
				curTab: 0,
				loadTitle: '加载中',
				loadStatus: true,
				printNum: 50,
				storeList: [],
				page: 1,
				limit: 15,
				orderList: [],
				storeName: '',
				searchVal: '',
				searchVal1: '',
				isSure: false,
				refundPrice: '',
				order_id: '',
				isEdit: false,
				stock: '',
				curItem: {},
				sysHeight: sysHeight,
				// #ifdef APP-PLUS || MP
				top: 43,
				// #endif
				// #ifdef H5
				top: 0,
				// #endif
				tips: '',
				isScan: false, // 是否扫码搜索
			};
		},
		onLoad(opt) {
			if(opt.name) {
				this.storeName = opt.name
				this.storeId = opt.id
			}
			this.getStoreList()
			// this.getOrders()
		},
		methods: {
			// 获取门店商品
			getStoreList() {
				if(!this.loadStatus) return
				storeGoods({
					page: this.page,
					limit: this.limit,
				}).then(res => {
					if(res.data.length < this.limit) {
						this.loadStatus = false
						this.loadTitle = '没有更多了'
					}
					this.storeList.push(...res.data)
					this.page++;
				}).catch(err => {
					this.loadStatus = false
					this.loadTitle = '没有更多了'
				})
			},
			getSearch() {
				storeGoods({
					page: this.page,
					limit: this.limit,
					name: this.searchVal
				}).then(res => {
					if(res.data.length < this.limit) {
						this.loadStatus = false
						this.loadTitle = '没有更多了'
					}
					this.storeList = res.data
				}).catch(err => {
					this.loadStatus = false
					this.loadTitle = '没有更多了'
				})
			},
			// 扫码搜索订单
			scanCode() {
				// #ifdef H5
				uni.showToast({
					title: 'H5不支持扫码，请前往小程序',
					icon: 'none'
				})
				// #endif
				
				// #ifdef MP
				uni.scanCode({
					success: (res) => {
						goodsInfoByCode(res.result).then(res => {
							if(res.status == 200) {
								this.isScan = true
								this.storeList = []
								this.storeList.push(res.data)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
				})
				// #endif
			},
			// 查看全部
			lookAll() {
				this.isScan = false
				this.page = 1
				this.storeList = []
				this.loadStatus = true
				this.getStoreList()
			},
			// 获取门店订单
			getOrders() {
				if(!this.loadStatus) return
				storeOrders({
					page: this.page,
					limit: this.limit
				}).then(res => {
					if(res.data.length < this.limit) {
						this.loadStatus = false
						this.loadTitle = '没有更多了'
					}
					this.orderList.push(...res.data)
					this.page++;
				}).catch(err => {
					this.loadStatus = false
					this.loadTitle = '没有更多了'
				})
			},
			getSearchOrder() {
				storeOrders({
					page: this.page,
					limit: this.limit,
					name: this.searchVal1
				}).then(res => {
					if(res.data.length < this.limit) {
						this.loadStatus = false
						this.loadTitle = '没有更多了'
					}
					this.orderList = res.data
				}).catch(err => {
					this.loadStatus = false
					this.loadTitle = '没有更多了'
				})
			},
			/**
			 * 去订单详情
			 */
			goOrderDetails: function(order_id) {
				if (!order_id)
					return that.$util.Tips({
						title: '缺少订单号无法查看订单详情'
					});
				// #ifdef MP
				uni.showLoading({
					title: '正在加载'
				});
				openOrderSubscribe()
					.then(() => {
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/users/order_details/index?order_id=' + order_id + '&isStore=1'
						})
					})
					.catch(err => {
						uni.hideLoading();
					});
				// #endif
				// #ifndef MP
				uni.navigateTo({
					url: '/pages/users/order_details/index?order_id=' + order_id + '&isStore=1'
				});
				// #endif
			},
			
			// 搜索商品
			searchStore(e) {
				this.page = 1
				this.storeList = []
				this.loadStatus = true
				const { value } = e.detail
				this.searchVal = value
				this.$util.throttle(this.getSearch, 500)
			},
			// 搜索订单
			searchStore1(e) {
				this.page = 1
				this.orderList = []
				this.loadStatus = true
				const { value } = e.detail
				this.searchVal1 = value
				this.$util.throttle(this.getSearchOrder, 500)
			},
			stockFocus(e) {
				const { value } = e.detail
				this.stock = value
			},
			// 库存修改
			editStock(stock, index, item) {
				if(this.stock == stock) return
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '是否确认修改库存为' + stock,
				    success: (res) => {
				        if (res.confirm) {
							editStock({
								store_id: that.storeId,
								product_id: item.product_id,
								num: stock
							}).then(res => {
								uni.showToast({
									title: '修改成功',
									icon: "none"
								})
							}).catch(err => {
								uni.showToast({
									title: err,
									icon: "none"
								})
								that.storeList[index].shop_stock = that.stock
							})
				        } else if (res.cancel) {
							that.storeList[index].shop_stock = that.stock
				        }
				    }
				});
			},
			tabClick(index) {
				this.curTab = index
				this.page = 1
				this.loadStatus = true
				this.loadTitle = '加载中···'
				switch(index) {
					case 0: 
						this.storeList = []
						this.getStoreList()
					break;
					case 1:
						this.orderList = []
						this.getOrders()
					break;
				}
			},
			showPop(item) {
				this.$refs.popup.show()
				console.log(item)
				this.curItem = item
			},
			// 退款
			showPop1(item) {
				this.refundPrice = item.order_refund ? item.order_refund : item.pay_price
				this.order_id = item.order_id
				this.$refs.popup1.show()
			},
			goPrint() {
				uni.navigateTo({
					// url: '/pages/annex/print/print?printNum=' + this.printNum + '&storeId=' + this.curItem.store_id + '&productId=' + this.curItem.product_id
					url: '/pages/annex/print/print?printNum=' + this.printNum + '&' + this.curItem.codeurl + '&name=' + this.curItem.store_name
				})
				this.$refs.popup.close()
			},
			// 不了
			closePop() {
				this.$refs.popup1.close()
			},
			closePop2() {
				this.$refs.popup2.close()
				this.isEdit = false
			},
			// 确定退款输入金额
			refund() {
				this.isSure = true
			},
			// 确定退款
			refundSure() {
				shopOrderRefund({
					uni: this.order_id,
					refund_price: this.refundPrice
				}).then(res => {
					this.$refs.popup1.close()
					this.isSure = false
					this.tips = res.msg
					this.$refs.popup2.show()
				})
				
			},
			showPop2() {
				this.tips = '正在申请退款中!'
				this.$refs.popup2.show()
			},
			popupHide() {
				this.isSure = false
			},
			reduce (index) {
				if (this.printNum == 1) return
				this.printNum -= 1
			},
			plus (index) {
				this.printNum += 1
			},
			// 订单进入编辑状态
			editOrder(order_id, status) {
				if(status == '1') return this.$util.Tips({
						title: '退款中订单，不能修改'
					});
				if(status == '88') return this.$util.Tips({
						title: '编辑中的订单，不能修改'
					});
				if(status == '2') return this.$util.Tips({
						title: '该订单已退款，不能修改'
					});
				uni.navigateTo({
					url: '../shop_order_edit/shop_order_edit?id=' + order_id
				})
			},
			edit() {
				this.$refs.popup2.show()
			},
			// 函数节流
			throttle(fn, wait = 500, timeStamp = false) {
			  let previous = 0;
			  let timeout;
			  return function() {
			    let ctx = this;
			    let args = arguments;
			    if(timeStamp){
			      let now = Date.now();
			      if(now - previous > wait) {
			        fn.apply(ctx, args);
			        previous = now;
			      }
			    }else {
			      if(!timeout) {
			        timeout = setTimeout(()=>{
			          timeout = null;
			          fn.apply(ctx, args)
			        }, wait)
			      }
			    }
			  }
			}
		},
		onReachBottom() {
			switch(this.curTab) {
				case 0: 
					this.getStoreList()
				break;
				case 1:
					this.getOrders()
				break;
			}
			
		}
	}
</script>

<style lang="scss">
.container {
	width: 100%;
	
	.stroe_name {
		width: 100%;
		padding: 40rpx 30rpx 0;
		color: #bfbfbf;
		font-size: 30rpx;
		background-color: #fff;
		.icon-dizhi {
			font-size: 44rpx;
		}
	}
	.tab_content {
		width: 100%;
		
		.tabs {
			position: sticky;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 90rpx;
			z-index: 999;
			background-color: #fff;
			text {
				display: block;
				margin: 0 40rpx;
				font-size: 30rpx;
				font-weight: 700;
			}
			.active {
				position: relative;
				color: #95c51b;
				&::after {
					content: '';
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translate(-50%);
					width: 70%;
					height: 1px;
					background-color: #95c51b;
				}
			}
			
		}
		.tab {
			width: 100%;
			margin-top: 15rpx;
			background-color: #fff;
			padding: 30rpx 30rpx 0;
			.search_box{
				position: relative;
				width: 100%;
				height: 68rpx;
				border: 1px solid #BFBFBF;
				border-radius: 40rpx;
				input {
					width: 100%;
					height: 100%;
					padding-left: 76rpx;
					padding-right: 80rpx;
					font-size: 28rpx;
					box-sizing: border-box;
				}
				.icon-sousuo {
					position: absolute;
					top: 50%;
					left: 20rpx;
					transform: translate(0, -50%);
					font-size: 40rpx;
					color: #bfbfbf;
				}
				image {
					position: absolute;
					top: 50%;
					right: 24rpx;
					transform: translate(0, -50%);
					width: 40rpx;
					height: 40rpx;
					
				}
			}
			.tables {
				width: 100%;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #bfbfbf;
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding: 30rpx 0 10rpx;
					.row_td {
						width: 110rpx;
						text-align: center;
					}
					.row_td:first-child{
						width: 300rpx;
						text-align: left;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.btn {
						width: 80rpx;
						background-color: #95c51b;
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						border-radius: 8rpx;
						color: #fff;
					}
					input {
						height: 52rpx;
						border: 1px solid #95c51b;
						font-size: 24rpx;
						border-radius: 8rpx;
					}
				}
				.sticky {
					position: sticky;
					z-index: 100;
					background-color: #fff;
				}
			}
			.loadmore {
				width: 100%;
				.loading {
					display: flex;
					align-items: center;
					justify-content: center;
					.icon-jiazai {
						margin-right: 10rpx;
						font-size: 36rpx;
						animation: myRotate 1s linear infinite;
					}
					@keyframes myRotate {
						from {
							transform: rotate(0deg);
						}
						to {
							transform: rotate(360deg);
						}
					}
				}
			}
			.store_order_list {
				width: 100%;
				padding: 35rpx 0 0;
				.item {
					width: 100%;
					&:not(:last-child) {
						margin-bottom: 45rpx;
					}
					.order_num, .order_user {
						margin-bottom: 16rpx;
					}
					.order_user {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.order_info {
						width: 100%;
						background-color: #fff;
						border: 1px solid #95c51b;
						padding: 30rpx;
						border-radius: 10rpx;
						.row, .rows {
							display: flex;
							// align-items: center;
							justify-content: space-between;
							margin-bottom: 15rpx;
							.title {
								width: 450rpx;
							}
							.numberbox {
								display: flex;
								// align-items: center;
								justify-content: flex-end;
								width: 180rpx;
								text {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 40rpx;
									height: 40rpx;
									font-size: 24rpx;
									border-radius: 50%;
									color: #676868;
								}
								
								input {
									display: block;
									width: 70rpx;
									height: 40rpx;
									font-size: 30rpx;
									text-align: center;
									background-color: #eee;
									margin: 0 10rpx;
									border-radius: 10rpx;
								}
							}
						}
						.rows {
							margin-top: 50rpx;
							margin-bottom: 20rpx;
							align-items: center;
						}
						.total {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
						.btn_group {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							width: 100%;
							margin-top: 60rpx;
							text {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 140rpx;
								height: 52rpx;
								border-radius: 30rpx;
								font-size: 24rpx;
								border: 1px solid #ccc;
							}
							text:not(:first-child) {
								background-color: #95c51b;
								border: 1px solid #95c51b;
								color: #fff;
								margin-left: 20rpx;
							}
							.btn {
								width: 240rpx;
								height: 65rpx;
								margin: 0 auto;
								background-color: #95c51b;
								border: 0;
								font-size: 30rpx;
								border-radius: 40rpx;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
}
.back_all {
	width: 100%;
	padding: 20rpx;
	text-align: center;
	color: #95c51b;
}
.popup-content {
	padding: 50rpx;
	.popup_title {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		padding-bottom: 50rpx;
		// margin-bottom: 50rpx;
		// border-bottom: 1px solid #bfbfbf;
	}
	.title {
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		margin-bottom: 20rpx;
		margin-top: 50rpx;
		font-weight: 700;
	}
	.desc {
		width: 100%;
		text-align: center;
		color: #999;
	}
	.money {
		width: 100%;
		margin-top: 30rpx;
		input {
			display: block;
			width: 100%;
			height: 64rpx;
			font-size: 30rpx;
			text-align: center;
			// margin: 0 10rpx;
			border: 1px solid #333;
			border-radius: 40rpx;
		}
	}
	.tips {
		width: 100%;
		text-align: center;
		color: #999;
		margin-top: 10rpx;
	}
	.numberbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50rpx;
			height: 50rpx;
			border: 1px solid #95c51b;
			font-size: 24rpx;
			border-radius: 50%;
			color: #95c51b;
		}
		.plus {
			background-color: #95c51b;
			color: #fff;
		}
		input {
			display: block;
			width: 220rpx;
			height: 64rpx;
			font-size: 30rpx;
			text-align: center;
			margin: 0 10rpx;
			border: 1px solid #95c51b;
			border-radius: 8rpx;
		}
	}
	.pop_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 65rpx;
		background-color: #95c51b;
		font-size: 32rpx;
		border-radius: 40rpx;
		margin-top: 50rpx;
		color: #fff;
	}
	.pop_btn_group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 70rpx;
		text {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 47%;
			height: 65rpx;
			// background-color: #F2F2F2;
			border-radius: 40rpx;
			border: 1px solid #ccc;
			&:last-child {
				border: 0;
				background-color: #95c51b;
				color: #fff;
			}
		}
	}
}

</style>
